import Vue from 'vue'
// 1.安装
// 2.引入
import VueRouter from "vue-router";
import ArticleDetail from '@/views/article-detail'
import Layout from '@/views/layout'
import Article from '@/views/article'
import Collect from '@/views/collect'
import Like from '@/views/like'
import User from '@/views/user'
// 3. Vue.use
Vue.use(VueRouter)

// 4.创建路由实例
/**
 * router 全局最大的路由实例 跳转相关功能
 *  this.$router.push
 *    两种简写 this.$router.push('/abc?a=1&b=2') 
 *            this.$router.push('/detail/1')
 *    完整点的写法 传入对象 path或者name
 *  this.$router.push({
 *      path: '/xxx'
 *      query: {
 *        键1： 值1
 *        。。。。
 *      } 
 *  })
 * 
 *  注意 path是会忽略 params 
 *  query 刷新不会丢失 参数在url里
 * 
 *  this.$router.push({
 *      name: '路由名称'， - 需要在路由对象里配置 需要对应name属性
 *      query: {
 *        键1：值1，
 *        。。。。
 *      }，
 *      params： {
 *        键1： 值1
 *        。。。
 *      }
 * })
 * 
 *  存到内存中 刷新是会丢失的 params如果你动态的那个值传了 刷新是不会消失的 在url里面
 *  其他就会丢失
 * 
 *  query问号 拼接参数 params斜杠  拼接参数
 * routes 多个路由规则 多个路由信息 多个映射关系
 * route 路由规则 - 路由信息 我们页面中传参 获取参数用的也是route
 *  this.$route.query 或者 params
 */
const router = new VueRouter({
  // 核心2步 1.配置路由规则 映射 2.指定路由出口（初学者最容易忘记，注意要’挖坑‘）
  routes: [
    {
      // 非动态路由 访问我们页面组件 是可以通过？传参也能访问 问号传参 ?a=1&b=2
      path: '/',
      component: Layout,
      redirect: '/article',
      // 二级路由 架子里面配置children字段
      children: [
        {
          path: 'article',
          component: Article
        },
        {
          path: 'collect',
          component: Collect
        },
        {
          path: 'like',
          component: Like
        },
        {
          path: 'user',
          component: User
        },
      ]
    },
    // {
    //   // 动态路由 :id 占个id的坑 - 就是斜杠后面拼接参数
    //   // detail/1 =>代表id就是1 
    //   // detail/2 =>代表id是2
    //   // 如果你访问的路径是动态路由，他必须带参数，如果不带就找到你这个页面组件
    //   path: '/detail/:id',
    //   component: ArticleDetail
    // }
    {
      path: '/detail',
      component: ArticleDetail
    }
  ]
})

export default router